@import "common-var";

.reader-route-view {
  padding: 64px 32px;
  min-height: 100vh;
  position: relative;
  color: @dark-font-color;
  background: @background-color;

  .ColumnOverview-module {
    max-width: 70%;
    border-radius: 12px;
    padding: 32px;
    min-height: calc(~"100vh - 64px");
    margin: 0 auto;
    background: @dropdown-background;

    .ColumnOverview-module_columnHead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px; /* 可选间距 */

      .ColumnOverview-module_bookTitle {
        flex: 1; /* 占据剩余空间 */
        min-width: 0; /* 关键：允许内容区域收缩 */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        .ColumnOverview-module_bookIcon {
          .book {
            font-size: 28px;
          }
        }

        .ColumnOverview-module_bookName {
          font-size: 28px;
          font-weight: 700;
          margin-left: 18px;
        }
      }

      .rename-title {
        display: flex;
        align-items: center;

        .ivu-input-wrapper {
          margin-left: 16px;

          /deep/.ivu-input {
            color: @dark-font-color;
            font-weight: 700;
            font-size: 25px;
            height: 40px;
          }
        }
      }

      .ColumnOverview-module_action {
        padding: 8px 0;
        flex-shrink: 0;

        .ColumnOverview-module_bookAction {
          display: flex;
          align-items: flex-start;

          .action-collect {
            display: flex;
            align-items: center;
            margin-left: 12px;
            cursor: pointer;
            border-radius: 6px;

            &:hover {
              background: @dropdown-item-hover;
            }

            .ivu-poptip {
              border: 1px solid @border-color_normal;
              border-radius: 6px;
              text-align: center;
              padding: 7px 5px;
              min-width: 72px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 700;
              font-size: 14px;
              cursor: pointer;

              .iconfont {
                margin-right: 5px;
              }
            }
          }

          .login-action-collect {
            width: 75px;
          }

          .action-more {
            line-height: 16px;
            padding: 4px;
            border: 1px solid @border-color_normal;
            border-radius: 6px;
            text-align: center;
            min-width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 0 12px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;

            &:hover {
              background: @dropdown-item-hover;
            }

            .menu-btn {
              color: @dark-font-color;
            }
          }

          /deep/.ivu-select-dropdown {
            padding: 5px 0;
            border-radius: 8px;

            .ivu-dropdown-menu {
              min-width: 135px;
              margin: 0;

              .line {
                height: 1px;
                padding: 7px 0 !important;
                .line-block {
                  width: 100%;
                  display: inline-block;
                  height: 1px;
                  background: @border-color_normal;
                  margin-bottom: 15px;
                }
                &:hover {
                  background: unset;
                }
              }

              .ivu-dropdown-item {
                padding: 8px 16px 8px 20px;
                font-weight: 500;

                .iconfont {
                  margin-right: 5px;
                }

                .permissions {
                  font-weight: 500;
                }

                .delete {
                  color: red;
                }
              }
            }
          }
        }
      }
    }

    .ColumnOverview-module_statistics {
      margin: 6px 0 6px 50px;

      .ColumnOverview-module_docCount {
        font-size: 14px;
        color: @grey-white-font-color;
        text-align: center;
        margin-right: 33px;
      }

      .ColumnOverview-module_wordCount {
        font-size: 14px;
        color: @grey-white-font-color;
        text-align: center;
      }

      .ColumnOverview-module_count {
        color: @dark-font-color;
        font-family: DIN Alternate Bold, Pingfang SC, Hiragino Sans GB, Helvetica, Droid Sans, Microsoft YaHei, Arial, sans-serif;
        font-size: 18px;
        font-weight: 700;
      }
    }

    .ColumnOverview-module_content {
      .ColumnOverview-module_userBoard {
        .editorBase-module_editor {
          position: relative;
          height: 100%;
          border-radius: 4px;
          border: 1px solid transparent;

          .layout-mode-adapt {
            position: relative;
            display: flex;
            height: auto;
            border-radius: 4px;
            margin-top: 5px;
            flex-direction: column;

            .toolbar-ui {
              position: static;
              z-index: auto;
              display: none;

              .editor-toolbar {
                justify-content: unset;
                border: none;
                padding: 0 12px 0 12px;

                /deep/ .toolbar-button {
                  color: var(--title-color);

                  &:hover {
                    background: var(--dropdown-item-hover);
                    color: var(--font-color);
                  }
                }

                /deep/ .toolbar-button-active {
                  background-color: var(--dropdown-item-hover);
                }

                /deep/ .editor-toolbar-content {
                  display: flex;
                  justify-content: unset;

                  .editor-toolbar-group {
                    border: none;

                    &:first-child {
                      padding: 4px 0 4px 4px;
                    }

                    &:last-child {
                      padding: 4px 4px 4px 0 ;
                    }
                  }
                }

                /deep/ .toolbar-dropdown-list {
                  background: var(--dropdown-bg-color);
                  border-color: @border-color_normal;

                  .toolbar-collapse-header, .toolbar-collapse-item-title {
                    color: @grey-white-font-color;
                  }

                  .toolbar-collapse-item-active {
                    background: var(--dropdown-item-hover);
                  }
                }
              }
            }

            .editor-body {
              height: auto;
              position: relative;

              .editor-wrapper {
                position: relative;
                overflow-anchor: none;
                display: flex;
                height: auto;
                overflow: visible;
                padding-top: 0;

                .editor-wrap-content {
                  flex: 1;
                  width: 100%;
                  min-width: auto;
                  margin: 0;

                  .editor-outer-wrap-box {
                    width: auto;
                    min-width: auto;
                    padding-bottom: 0;

                    .editor-wrap-box {
                      border: none;
                      box-shadow: none;
                      background: none;
                      margin-bottom: 0;

                      .readme-editor {
                        min-height: 65vh;
                        background: none;
                        color: @dark-font-color;
                      }

                      .editing {
                        padding: 16px 24px 8px 24px;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .editing {
          margin-top: 24px;
          border-color: @primary-color !important;

          .toolbar-ui {
            display: unset !important;
          }

          .toolbar-ui-fixed {
            position: fixed !important;
            top: 0px;
            background: @dropdown-background;
            z-index: 1 !important;
          }

          .readme-editor {
            padding: 10px 16px 8px 18px;
          }
        }

        .reading {
          padding: 20px 18px;
        }

        .readme-submit_action {
          margin-top: 15px;
        }
      }
    }
  }

  .back-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,1);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);

    .to-top {
      border-radius: 50%;
      margin-left: 7.5px;
      font-size: 33px;
      color: @light-font-color;
    }

    &:hover {
      background: @dropdown-item-hover;

      .to-top {
        color: @dark-font-color;
      }
    }
  }

  .enable-background-backTop {
    background: var(--theme-color);
    box-shadow: 0 0 6px var(---border-color);

    .to-top {
      color: var(--font-color);
    }
    &:hover {
      background: var(--dropdown-item-hover);

      .to-top {
        color: var(--font-color);
      }
    }
  }
}

.select-group {
  width: 252px;
  position: relative;

  .select-group-title {
    padding: 14px 16px 0;
    margin-bottom: 15px;

    .select-group-p1 {
      font-size: 14px;
      color: @dark-font-color;
      margin-bottom: 4px;
      font-weight: 500;
    }

    .select-group-p2 {
      font-size: 13px;
      color: @light-font-color;

      a {
        color: @link-color;
      }
    }
  }

  .select-group-tags {
    min-height: 65px;
    max-height: 240px;
    margin: 10px 16px 12px 16px;
    color:  @dark-font-color;

    .select-group-tags-check {
      margin-bottom: 12px;

      lebal {
        display: flex;
        align-items: center;
      }

      .select-group-tags-checkboxWrapper {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum", "tnum";
        display: inline-flex;
        align-items: baseline;
        line-height: inherit;
        align-items: center;
        cursor: pointer;

        .checkbox-label {
          padding-right: 8px;
          padding-left: 8px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .select-group-footer {
    border-top: 1px solid @border-color_normal;
    line-height: 45px;
    font-size: 14px;
    color: @light-font-color;
    padding-left: 16px;
    cursor: pointer;

    .iconfont {
      font-size: 14px;
    }
  }
}

/deep/ .delete-warn {
  color: @dark-font-color;

  .warn-content {
    display: flex;
    background-color: #F9EFCD;
    border: 1px solid #F5D480;
    border-radius: 6px;
    padding: 15px;

    .warn {
      font-size: 18px;
      color: red;
      margin-right: 5px;
      margin-top: -2px;
    }

    .column-name {
      color: red;
    }
  }

  .warn-confirm {
    margin: 20px 4px;
    height: 80px;

    .confirm-input {
      margin: 10px 0 5px 0;
    }

    .cannot-delete {
      .ivu-input {
        border-color: red;
      }
    }

    .tips {
      color: red;
    }
  }

  .warn-btn {
    margin: 10px 4px;
    width: 98.5%;
    display: flex;
    align-items: center;

    & span {
      width: 100%;
    }

    .column-name {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

/deep/ .normal-background {
  .ivu-input {
    color: @dark-font-color !important;
  }

  .delete-warn {
    .ivu-input-icon {
      color: @light-font-color;
    }
  }
}

.select-group {
  width: 252px;
  position: relative;

  .select-group-title {
    padding: 14px 16px 0;
    margin-bottom: 15px;

    .select-group-p1 {
      font-size: 14px;
      color: @dark-font-color;
      margin-bottom: 4px;
      font-weight: 500;
    }

    .select-group-p2 {
      font-size: 13px;
      color: @light-font-color;

      a {
        color: @link-color;
      }
    }
  }

  .select-group-tags {
    min-height: 65px;
    max-height: 240px;
    margin: 10px 16px 12px 16px;
    color:  @dark-font-color;

    .select-group-tags-check {
      margin-bottom: 12px;

      lebal {
        display: flex;
        align-items: center;
      }

      .select-group-tags-checkboxWrapper {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum", "tnum";
        display: inline-flex;
        align-items: baseline;
        line-height: inherit;
        align-items: center;
        cursor: pointer;

        .checkbox-label {
          padding-right: 8px;
          padding-left: 8px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .select-group-footer {
    border-top: 1px solid @border-color_normal;
    line-height: 45px;
    font-size: 14px;
    color: @light-font-color;
    padding-left: 16px;
    cursor: pointer;

    .iconfont {
      font-size: 14px;
    }
  }
}

.enable-background {
  .select-group {
    .select-group-title {
      .select-group-p1 {
        color: var(--font-color);
      }

      .select-group-p2 {
        color: var(--title-color);
      }
    }

    .select-group-tags {
      color: var(--font-color);
    }

    .select-group-footer {
      border-color: var(--border-color);
      color: var(--title-color);
    }
  }
}